<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script th:src="@{/static/js/vue.js}"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript" th:src="@{/static/js/index.js}"></script>
    <link rel="stylesheet" th:href="@{/static/css/index.css}">
    <title>订单详情</title>
</head>
<body th:object="${bean}">
    <div th:width="100px"  style="background-color: #ebecf0;height: 50px"><font style="font-size: 30px;position: relative;top: 10px;left:470px">订单详情</font></div>
    <el-collapse  id="collapse" v-model="activeNames" @change="handleChange">
        <el-collapse-item title="订单状态" name="1">
            <div style="font-size: 18px">
                <el-row>
                    <el-col :span="8">
                        订单编号:<span th:text="*{orderid}"></span>
                    </el-col>
                    <el-col :span="8">
                        定单状态:<span th:text="*{status}"></span>
                    </el-col>
                    <el-col :span="8">
                        审核时间:<span th:text="${#dates.format(bean.submitTime,'yyyy-MM-dd')}"></span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        申请金额:<span th:text="*{money}"></span>
                    </el-col>
                    <el-col :span="8">
                        申请期数:<span th:text="*{periods}"></span>
                    </el-col>
                    <el-col :span="8">
                        年率/月:<span th:text="*{monthInterestRate}"></span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        手续费:<span th:text="*{handleCost}"></span>
                    </el-col>
                    <el-col :span="8">
                        居间服务费:<span th:text="*{handleCost}"></span>
                    </el-col>
                    <el-col :span="8">
                        放款渠道:<span th:text="*{ditchAllname}"></span>
                    </el-col>
                </el-row>
            </div>
        </el-collapse-item>
        <el-collapse-item title="产品信息" name="2">
            <div style="font-size: 18px">
                <el-row>
                    <el-col :span="8">
                        产品名:<span th:text="*{productName}"></span>
                    </el-col>
                    <el-col :span="8">
                        还款方式:<span th:text="*{refundType}"></span>
                    </el-col>
                    <el-col :span="8">
                        贷款支付给:<span th:text="*{name}"></span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        提前还款说明:<span>支持提前还款，按当前还款周期利息计算，违约金：100%，最少还款期数：0期</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        罚息:<span th:text="|按日复利,日利率:*{penaltyInterestRate}%;按月计息:无;罚息上限:无|"></span>
                    </el-col>
                </el-row>
            </div>
        </el-collapse-item>
        <el-collapse-item title="客户信息" name="3">
            <div style="font-size: 18px">
                <el-row>
                    <el-col :span="8">
                        客户姓名:<span th:text="*{name}"></span>
                    </el-col>
                    <el-col :span="8">
                        手机号码:<span th:text="*{telephone}"></span>
                    </el-col>
                    <el-col :span="8">
                        客户备注:<span th:text="*{customerNote}"></span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        还款方式:<span th:text="*{refundType}"></span>
                    </el-col>
                    <el-col :span="8">
                        银行卡号:<span th:text="*{bankId}"></span>
                    </el-col>
                    <el-col :span="8">
                        银行名称:<span th:text="*{openAccountBranch}"></span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        客户邮箱:<span th:text="*{email}"></span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        客户备注:<span></span>
                    </el-col>
                </el-row>
            </div>
        </el-collapse-item>
        <el-collapse-item title="渠道信息" name="4">
            <div style="font-size: 18px">
                <el-row>
                    <el-col :span="8">
                        渠道名称:<span th:text="*{ditchAllname}"></span>
                    </el-col>
                    <el-col :span="8">
                        业务员:<span th:text="*{useriD}"></span>
                    </el-col>
                    <el-col :span="8">
                        业务员电话:<span th:text="*{userTel}"></span>
                    </el-col>
                </el-row>
            </div>
        </el-collapse-item>
        <div v-if="plans.length>0">
        <el-collapse-item title="还款计划" name="5">
            <el-table
                    :data="plans"
                    border
                    style="width: 100%"
                    :header-cell-style="{'text-align':'center'}"
                    :cell-style="{'text-align':'center'}">
                <el-table-column
                        prop="dataNum"
                        label="期数"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="billTime"
                        label="账单日期"
                        :formatter="formatterbillTime"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="principal"
                        label="本期应还"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="interest"
                        label="利息"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="penaltyInteres"
                        label="罚息"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="waitMoney"
                        label="待还金额"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="alsoStatus"
                        label="还款状态"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="alsoTime"
                        label="还款时间"
                        :formatter="formatteralsoTime"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="overdueDays"
                        label="逾期天数"
                        width="100">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="100px">
                    <template  slot-scope="scope">
                        <el-button @click="settle(scope.row)" v-if="scope.row.alsoStatus!='已还款'" type="text"  size="mini"><span>结清</span></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-collapse-item>
        </div>
        <br><br><br><br><br><br><br><br>

        <center>
            <el-button type="success" @click="cleanall" v-if="plans.length>0">全部结清</el-button>
            <el-button type="success" onclick="agree()" v-else>同意放款</el-button>
        </center>

    </el-collapse>
</body>

<script th:inline="javascript">

    let orderid=[[${bean.orderid}]];
    function agree() {
        axios
            .get([[@{/loan/agree}]],{
            params:{
                orderid:orderid
            }
        }).then(function (msg) {
            alert(msg.data.msg);
        })
    }

    let plans=[[${bean.returnPlanInfos}]];
    alert(plans.length)
    var app=new Vue({
        el:"#collapse",
        data:{
            activeNames: [1,2,3,4,5,6,7],
            plans:plans,
            isshow:false,
        },
        methods:{
            clean:function(obj){
                alert(JSON.stringify(obj));
                //封装当前uid以及期数id
                axios({
                        url:[[@{/loan/clean}]],
                        method:"post",
                        data: JSON.stringify(obj),
                        headers:{
                            'Content-Type':'application/json'  //如果写成contentType会报错
                        }
                    }
                ).then(function (msg) {
                    alert(msg.data.msg);
                    //刷新数据
                    axios.get([[@{/loan/getallByOid}]],{
                        params:{
                            orderid:orderid
                        }
                    }).then(function (msg) {
                        alert(JSON.stringify(msg.data.data.returnPlanInfos))
                        app.plans=msg.data.data.returnPlanInfos;
                    })
                })
            },
            handleChange(val) {
            },
            settle:function (row) {
                //创建数组
                var arr = new Array(row)
                this.clean(arr);
            },
            cleanall:function(){
                //筛选不是已还款的数据
                var old=this.plans;
                var arr=[];
                for (let i = 0; i <old.length; i++) {
                    if(old[i]["alsoStatus"]=="未还款"){
                        arr.push(old[i]);
                    }
                }
                this.clean(arr);
            },
            formatterbillTime(row) {
                var t=new Date(row.billTime);//row 表示一行数据, updateTime 表示要格式化的字段名称
                return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate();
            },
            formatteralsoTime(row){
                if (row.alsoTime==null){
                    return "未还款";
                }
                else{
                    var t=new Date(row.billTime);//row 表示一行数据, updateTime 表示要格式化的字段名称
                    return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate();
                }
            }

        },

    })
</script>
</html>